<template>
  <div class="app-container">
    <el-card class="filter-container">
      <div>
        <i class="el-icon-search" />
        <span>筛选</span>
        <div class="filter-btn">
          <el-button

            icon="el-icon-search"
            type="primary"
            size="small"
            @click="getList()"
          >
            查询
          </el-button>
          <el-button
            icon="el-icon-setting"
            size="small"
            @click="handleResetSearch()"
          >
            重置
          </el-button>

        </div>

      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="相簿名：">
            <el-input v-model="listQuery.name" style="width: 203px" placeholder="相簿名" />
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="filter-container">
      <div>
        <el-button type="text">操作</el-button>
        <div class="filter-btn">
          <el-button
            type="success"
            size="mini"
            icon="el-icon-plus"
            @click="add"
          >
            添加
          </el-button>

          <el-button
            v-show="isEdit === 0"
            type="danger"
            size="mini"
            icon="el-icon-edit"
            @click="_=> isEdit = 1"
          >
            编辑
          </el-button>

          <el-button
            v-show="isEdit === 1"
            type="danger"
            size="mini"
            icon="el-icon-close"
            @click="_=> isEdit = 0"
          >
            退出编辑
          </el-button>
        </div>

      </div>

    </el-card>

    <div class="card-container">
      <el-row :gutter="24">
        <el-col v-for="(item, index) in list" :key="index" :span="4">
          <el-card>
            <div class="box-card-header" @click="toPhoto(item)">
              <img v-if="!item.cover || item.cover === ''" src="@/assets/common/album_cover.jpg">
              <img v-else :src="item.cover">
            </div>
            <div style="padding: 14px;">
              <div class="bottom">
                <mallki class-name="mallki-text" :text="item.createTime | parseTime('{y}-{m}-{d}')" />
                <mallki class-name="mallki-text" :text="item.name" />
                <div v-show="isEdit === 1" class="filter-btn">
                  <el-button size="small" type="warning" @click="update(item)">编辑</el-button>
                  <el-button size="small" type="danger" @click="remove(item)">删除</el-button>
                </div>
              </div>

            </div>
          </el-card>
        </el-col>
      </el-row>

      <pagination v-show="total>0" :total="total" :page-sync="listQuery.pageNum" :limit.sync="listQuery.pageLimit" :page-limits="pageLimits" @pagination="getList" />
    </div>

    <el-dialog
      :title="isAdd ? '新增相簿' : '编辑相簿'"
      :visible.sync="editOperFormVisible"
      center
      width="30%"
    >
      <el-form
        ref="editOperForm"
        :rules="editOperFormRules"
        :model="editOperForm"
      >
        <el-form-item label="名称：" prop="name">
          <el-input
            v-model="editOperForm.name"
            placeholder="名称"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editOperFormVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="handleSaveAlbum">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import {
  getList,
  create,
  updateById,
  removeById
} from '@/api/life/album'
import Pagination from '@/components/Pagination'

import Mallki from '@/components/TextHoverEffect/Mallki'

const defaultListQuery = {
  pageNum: 1,
  pageLimit: 12,
  sorts: '-createTime'
}

export default {
  name: 'AlbumList',
  components: {
    Pagination,
    Mallki
  },
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      pageLimits: [6, 12, 18, 24],

      list: [],

      total: 0,
      listLoading: true,
      loading: false,

      isEdit: 0,

      isAdd: false,
      editOperFormVisible: false,
      editOperForm: {},
      editOperFormRules: {
        name: [{ required: true, trigger: 'blur', message: '请填写相簿名' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getList(this.listQuery).then(res => {
        this.listLoading = false
        this.list = res.data.records
        this.total = res.data.total
      })
    },
    handleDelete(index, row) {
      this.$confirm('是否要删除照片', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeById(row.id).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1000
          })
          this.getList()
        })
      })
    },
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery)
    },
    searchList() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    add() {
      this.isAdd = true
      this.editOperForm = {}
      this.editOperFormVisible = true
    },
    update(row) {
      this.isAdd = false
      this.editOperForm = Object.assign({}, row)
      this.editOperFormVisible = true
    },
    toPhoto(album) {
      this.$router.push({
        path: '/life/album/photo',
        query: {
          albumId: album.id
        }
      })
    },
    handleSaveAlbum() {
      this.$refs.editOperForm.validate(valid => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const params = Object.assign({}, this.editOperForm)
            params.menuPermissionId = this.menuPermissionId

            if (this.isAdd) {
              create(params).then(_ => {
                this.$message.success('新建相簿成功，根据需要可分配相应API！')
                this.editOperFormVisible = false
                this.getList()
              })
            } else {
              updateById(params.id, params).then(_ => {
                this.$message.success('修改相簿成功！')
                this.editOperFormVisible = false
                this.getList()
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    remove(row) {
      this.$confirm('是否要删除相簿(会删除相应下的所有照片)?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeById(row.id).then(_ => {
          this.getList()
        })
      })
    }
  }
}
</script>
<style  lang="scss" scoped>
.box-card-header {
  position: relative;

  height: 150px;
  img {
    width: 100%;
    transition: all 0.2s linear;
    &:hover {
      transform: scale(1.1, 1.1);
      filter: contrast(130%);
    }
  }
}

.bottom{
  text-align: center
}

.card-container{
  margin-top:0px;

  .el-col{
    margin-top:20px;
  }
}
</style>
